

<template>
  <van-nav-bar border>
    <template #right>
      <van-popover
        v-model="showPopover"
        placement="bottom-end"
        theme="dark"
        trigger="click"
        :actions="alist"
        @select="onSelect"
      >
        <template #reference>
          <van-icon name="ellipsis" size="22" />
        </template>
      </van-popover>
    </template>
    <template #left>
      <slot>
        <div v-if="!noBack" class="back" @click="goback">
          <van-icon name="arrow-left" />
          <span>返回</span>
        </div>
      </slot>
    </template>
    <template #title>
      <div class="van-ellipsis">
        <span v-html="title"></span>
      </div>
    </template>
  </van-nav-bar>
</template>
  
  <script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        {
          text: "购物车",
          icon: "edit",
          path: "/ms/cart",
          name: "cart",
          disabled: this.$route.name === "cart",
        },
        {
          text: "搜索商品",
          icon: "search",
          path: "/search",
          name: "search",
          disabled: this.$route.name === "search",
        },
        {
          text: "登录注册",
          icon: "user-o",
          path: "/login",
          name: "login",
          disabled: this.$route.name === "login",
        },
        {
          text: "首页",
          icon: "home-o",
          path: "/ms/home",
          name: "home",
          disabled: this.$route.name === "home",
        },
        { text: "扫码", icon: "scan", path: "/scan", name: "scan" },
        { text: "定位", icon: "location-o", path: "/city", name: "city" },
      ],
    };
  },
  computed: {
    alist() {
      return this.actions.filter((item) => item.name !== this.$route.name);
    },
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onSelect(action) {
      console.log(action);
      this.$router.push(action.path);
    },
  },
  props: {
    title: [String, Number],
    noBack: Boolean,
  },
};
</script>
  
  
  <style>
.back {
  color: #1989fa;
}
.myhead {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
</style>
  